<template>
    <el-alert type="success" show-icon :closable="false">
        <template #title="scope">
            {{`共追踪到 ${state.allData.length} 条近期 HTTP 请求记录`}}
            <el-link type="primary" @click="getHttptrace()">点击刷新</el-link>
        </template>
    </el-alert>
    <el-table :data="state.allData" style="width: 100%" height="600">
        <el-table-column prop="timestamp" label="请求时间">
            <template #default="scope">
                {{moment(scope.row.timestamp).format("YYYY-MM-DD hh:mm:ss")}}
            </template>
        </el-table-column>
        <el-table-column prop="request.method" label="请求方法">
            <template #default="scope">
                <el-tag class="ml-2">{{scope.row.request.method}}</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="request.uri" label="请求URL" />
        <el-table-column prop="response.status" label="响应状态">
            <template #default="scope">
                <el-tag class="ml-2" type="success">{{scope.row.response.status}}</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="timeTaken" label="请求耗时">
            <template #default="scope">
                <el-tag class="ml-2" type="success">{{scope.row.timeTaken}} ms</el-tag>
            </template>
        </el-table-column>
    </el-table>
</template>

<script setup lang="ts">
import { onMounted, reactive } from 'vue';
import moment from "moment";
import { getHttptraceApi } from '../../apis/actuator'
const state = reactive({
    allData: [] as any
})
async function getHttptrace() {
    const res = await getHttptraceApi();
    console.log(res);
    state.allData = res.traces

}
onMounted(() => {
    getHttptrace()
})
</script>

<style scoped>

</style>